.z-post-wrapper {
  min-height: 100vh;
  transition: all 0.3s ease;
  --padding: 1rem;
  --space: 1em;
}
.z-post-head {
  position: fixed;
  top: 0;
  right: 0;
  left: $sidebar-width;
  z-index: $header-zIndex;
  width: calc(100% - #{$sidebar-width});
  padding: 0 var(--padding);
  background-color: #fff;
  box-shadow: $header-box-shadow;
  transition: all 0.2s ease-in-out;
  ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    li {
      height: $post-head-height;
      line-height: $post-head-height;
      padding: 0 var(--space);
      color: #6b7386;
      font-size: 15px;
      font-family: PingFangSC-Regular;
      cursor: pointer;
      transition: all 0.3s ease;
      box-sizing: border-box;
      &.is-active,
      &:hover {
        color: $theme;
        background-color: $content-color-hover;
      }
    }
  }
}
.z-post-body {
  padding-top: $padding-top;
  margin: 0 var(--padding) var(--padding);
}
.z-post-content {
  width: calc(100% - #{$sidebar-width} - var(--padding) * 6);
  min-height: calc(100vh - #{$padding-top} - var(--padding) * 3);
  padding: var(--padding) 0 var(--padding) var(--padding);
  background-color: #fff;
  overflow: hidden;
}
.z-post-list {
  display: inline-block;
  vertical-align: top;
  width: calc(33.333% - var(--space));
  padding: var(--space);
  margin-bottom: var(--space);
  margin-right: var(--space);
  background: #fff;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  transition: all 0.5s ease-in-out;
  &:hover {
    box-shadow: 0px 0px 10px 1px $content-color-border;
  }
  .date {
    font-weight: 600;
    background-image: linear-gradient(
      90deg,
      $home-font-linear,
      $home-font-gradient
    );
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}
.z-post-title {
  color: $post-title-color;
  font-weight: 600;
  font-size: 23px;
  transition: all 0.2s;
  &:hover {
    color: $theme;
  }
}
.z-post-info {
  display: flex;
  align-items: center;
  color: #999;
  padding: var(--padding) 0;
  .cell {
    margin-right: 1em;
  }
}
.cell-hover {
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  &:hover {
    color: $theme;
  }
}
.post-list-tag {
  span {
    & + span {
      margin-right: 10px;
    }
  }
}
.aside-wrap {
  position: sticky;
  top: $padding-top;
  width: $width;
  float: right;
}
.is-mobile {
  .z-post-head {
    top: $header-height;
    left: 0;
    width: 100%;
    height: auto;
    max-height: 0;
    transition: max-height 0.3s ease-in-out;
    box-shadow: $header-box-shadow;
    overflow: hidden;
    // & > ul {
    //   padding: 0;
    //   li {
    //     min-width: 25%;
    //     height: $header-height - $space;
    //     line-height: $header-height - $space;
    //   }
    // }
    // .navigate-link {
    //   font-size: 14px;
    //   padding: 0 $space;
    // }
    &.open {
      max-height: 100vh;
    }
  }
  // .is-drop {
  //   display: none;
  // }
}
@media screen and (max-width: $xl1440) {
  .z-post-list {
    width: calc(50% - var(--space));
  }
}
@media screen and (max-width: $xl1366) {
  .z-post-list {
    width: calc(100% - var(--space));
  }
}
@media screen and (max-width: $xl1024) {
  .aside-wrap {
    width: 10rem;
  }
  .z-post-content {
    width: calc(100% - 10rem - var(--padding) * 2);
  }
}
@media screen and (max-width: $md640) {
  .aside-wrap {
    position: relative;
    float: unset;
    top: 0;
    width: 100%;
    margin-bottom: 10px;
  }
  .z-post-content {
    width: calc(100% - var(--space));
  }
}
@media screen and (max-width: $sm) {
  .z-post-info {
    flex-direction: column;
    align-items: flex-start;
    & > div {
      & + div {
        margin-top: 8px;
      }
    }
  }
  .post-list-tag {
    display: flex;
    flex-wrap: wrap;
    .icon-tags {
      margin-right: 5px;
    }
  }
}
